<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <!-- 加载 Datatables -->
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>

<body>
    
    <table id="myTable" class="display" style="width:100%;text-align: center;">
     
        <thead>
        
            <tr>
                <th>序列号</th>
                <th>课程</th>
                <th>学分</th>
                <th>主讲师</th>
                <th>时间</th>
                <th>地点</th>
            </tr>
        </thead>
        <tbody>
            <!-- 模板1 -->
            <tr style="display: none;">
                <td>1</td>
                <td>JAVA程序编程</td>
                <td>5.0</td>
                <td>朱晓晴</td>
                <td>2023/8/2</td>
                <td>司德楼201</td>

            </tr>
            <!-- 模板-->

            <!-- 模板2 -->
            <tr style="display: none;">
                <td>1</td>
                <td>JAVA程序编程</td>
                <td>5.0</td>
                <td>朱晓晴</td>
                <td>2023/8/2</td>
                <td>司德楼201</td>

            </tr>
            <!-- 模板-->
            <tr>
                <td>1</td>
                <td>JAVA程序编程</td>
                <td>5.0</td>
                <td>朱晓晴</td>
                <td>2023/8/2</td>
                <td>司德楼201</td>
            </tr>

        </tbody>
    </table>
    <script>
        let user = ["刘", "张", "王", "李", "彭", "朴", "苍"];
        let user2 = ["雁卉", "凝冬", "幻露", "雁露", "觅儿", "盼香", "你竹", "访文", "冰双", "静珊", "沁雪", "小影", "琼琚"];
        let shcool = ["育才楼", "树人楼", "扬帆楼", "宏志楼", "展鹏楼", "寄望楼", "青云楼"];
        let book = ["Layer", "LightBox", "jQuery", "javaScript", "JAVA", "Prism"]
        $(function () {

            for (let i = 2; i < 100; i++) {
                let x = user[Math.round(Math.random() * 6)];
                let m = user2[Math.round(Math.random() * 12)];

                if (i % 2 == 0) {
                    $("tbody tr:eq(0) td:first").html(i);
                    $("tbody tr:eq(0) td:eq(3)").html(x + "" + m);
                    $("tbody tr:eq(0) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                    $("tbody tr:eq(0) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                    $("tbody tr:eq(0) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                    $("tbody tr:eq(0) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                    $("tbody tr:eq(0)").clone().removeProp("style").appendTo("tbody:last")
                } else {
                    $("tbody tr:eq(1) td:first").html(i);
                    $("tbody tr:eq(1) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                    $("tbody tr:eq(1) td:eq(3)").html(x + "" + m);
                    $("tbody tr:eq(1) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                    $("tbody tr:eq(1) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                    $("tbody tr:eq(1) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                    $("tbody tr:eq(1)").clone().removeProp("style").appendTo("tbody:last")
                }


            }
            $("select").change(function () {
                if ($("select").val() == 100) {
                    for (let i = 2; i < 200; i++) {
                        let x = user[Math.round(Math.random() * 6)];
                        let m = user2[Math.round(Math.random() * 12)];

                        if (i % 2 == 0) {
                            $("tbody tr:eq(0) td:first").html(i);
                            $("tbody tr:eq(0) td:eq(3)").html(x + "" + m);
                            $("tbody tr:eq(0) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                            $("tbody tr:eq(0) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                            $("tbody tr:eq(0) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                            $("tbody tr:eq(0) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                            $("tbody tr:eq(0)").clone().removeProp("style").appendTo("tbody:last")
                        } else {
                            $("tbody tr:eq(1) td:first").html(i);
                            $("tbody tr:eq(1) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                            $("tbody tr:eq(1) td:eq(3)").html(x + "" + m);
                            $("tbody tr:eq(1) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                            $("tbody tr:eq(1) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                            $("tbody tr:eq(1) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                            $("tbody tr:eq(1)").clone().removeProp("style").appendTo("tbody:last")
                        }


                    }
                } else {
                    for (let i = 2; i < 500; i++) {
                        let x = user[Math.round(Math.random() * 6)];
                        let m = user2[Math.round(Math.random() * 12)];

                        if (i % 2 == 0) {
                            $("tbody tr:eq(0) td:first").html(i);
                            $("tbody tr:eq(0) td:eq(3)").html(x + "" + m);
                            $("tbody tr:eq(0) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                            $("tbody tr:eq(0) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                            $("tbody tr:eq(0) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                            $("tbody tr:eq(0) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                            $("tbody tr:eq(0)").clone().removeProp("style").appendTo("tbody:last")
                        } else {
                            $("tbody tr:eq(1) td:first").html(i);
                            $("tbody tr:eq(1) td:eq(4)").html("20" + Math.round(Math.random() * 2) + "" + Math.round(Math.random() * 3) + "/" + Math.ceil(Math.random() * 12) + "/" + Math.round(Math.random() * 30))
                            $("tbody tr:eq(1) td:eq(3)").html(x + "" + m);
                            $("tbody tr:eq(1) td:eq(1)").html(book[Math.round(Math.random() * 7)])
                            $("tbody tr:eq(1) td:last").html(shcool[Math.round(Math.random() * 6)] + Math.round(Math.random() * 10) + "0" + Math.round(Math.random() * 10))
                            $("tbody tr:eq(1) td:eq(2)").html(Math.round(Math.random() * 10) + ".0");
                            $("tbody tr:eq(1)").clone().removeProp("style").appendTo("tbody:last")
                        }


                    }
                }

            })
        })

        $(document).ready(function () {
            
            $('#myTable').DataTable({
            "paging": true,
            "ordering": true,
            "info": false,
            "searching": true,
            "fnPreDrawCallback": function (oSettings) {
                $('.dataTables_filter input').attr({ 'name': '查询', 'placeholder': '按名称搜索' });//提示
            },
            "language": {
                "decimal": "",
                "emptyTable": "表中数据为空",
                "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "InfoPostFix": "",
                "thousands": ",",
                "lengthMenu": "显示 _MENU_ 项结果",
                "loadingRecords": "载入中...",
                "processing": "处理中...",
                "search": "搜索:",
                "zeroRecords": "没有匹配结果",
                "Paginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "尾页"
                },
                "Aria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                },


            }

        });
        $('#tagTable').DataTable().column(20).visible(false);
        });
        


    </script>

</body>

</html>